<template>
  <div class="resource-security">
    <Page
      title="权限与安全管理"
      subtitle="按子SaaS、业务角色、团队成员进行访问控制，支持资源操作记录审计"
    >
      <!-- 安全概览统计 -->
      <div class="security-overview">
        <Row :gutter="16">
          <Col :span="6">
            <StatisticCard
              title="活跃用户"
              :value="overview.activeUsers"
              :precision="0"
              suffix="人"
              :value-style="{ color: '#3f8600' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:account-group" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="角色数量"
              :value="overview.roles"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#1890ff' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:shield-account" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="今日操作"
              :value="overview.todayOperations"
              :precision="0"
              suffix="次"
              :value-style="{ color: '#722ed1' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:clipboard-list" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="安全事件"
              :value="overview.securityEvents"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#f5222d' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:alert-circle" />
              </template>
            </StatisticCard>
          </Col>
        </Row>
      </div>

      <!-- 权限管理 -->
      <div class="permission-management">
        <Card title="权限管理" :bordered="false">
          <Tabs v-model:active-key="activePermissionTab">
            <TabPane key="users" tab="用户管理">
              <UserManagement />
            </TabPane>
            <TabPane key="roles" tab="角色管理">
              <RoleManagement />
            </TabPane>
            <TabPane key="permissions" tab="权限配置">
              <PermissionConfig />
            </TabPane>
            <TabPane key="access" tab="访问控制">
              <AccessControl />
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <!-- 审计日志 -->
      <div class="audit-logs">
        <Card title="审计日志" :bordered="false">
          <Tabs v-model:active-key="activeAuditTab">
            <TabPane key="operations" tab="操作日志">
              <OperationLogs />
            </TabPane>
            <TabPane key="access" tab="访问日志">
              <AccessLogs />
            </TabPane>
            <TabPane key="security" tab="安全事件">
              <SecurityEvents />
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <!-- 安全策略 -->
      <div class="security-policies">
        <Card title="安全策略" :bordered="false">
          <SecurityPolicies />
        </Card>
      </div>

      <!-- 审计报告 -->
      <div class="audit-reports">
        <Card title="审计报告" :bordered="false">
          <AuditReports />
        </Card>
      </div>
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { Row, Col, Card, Tabs, TabPane } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import StatisticCard from '#/components/hotel/StatisticsCard.vue';

// 子组件
import UserManagement from './components/UserManagement.vue';
import RoleManagement from './components/RoleManagement.vue';
import PermissionConfig from './components/PermissionConfig.vue';
import AccessControl from './components/AccessControl.vue';
import OperationLogs from './components/OperationLogs.vue';
import AccessLogs from './components/AccessLogs.vue';
import SecurityEvents from './components/SecurityEvents.vue';
import SecurityPolicies from './components/SecurityPolicies.vue';
import AuditReports from './components/AuditReports.vue';

// 安全概览数据
const overview = reactive({
  activeUsers: 0,
  roles: 0,
  todayOperations: 0,
  securityEvents: 0,
});

// 当前激活的标签
const activePermissionTab = ref('users');
const activeAuditTab = ref('operations');

// 加载安全概览数据
const loadSecurityOverview = async () => {
  try {
    // TODO: 调用API获取安全概览数据
    overview.activeUsers = 156;
    overview.roles = 24;
    overview.todayOperations = 1247;
    overview.securityEvents = 2;
  } catch (error) {
    console.error('加载安全概览失败:', error);
  }
};

onMounted(() => {
  loadSecurityOverview();
});
</script>

<style scoped>
.resource-security {
  padding: 20px;
}

.security-overview {
  margin-bottom: 24px;
}

.permission-management {
  margin-bottom: 24px;
}

.audit-logs {
  margin-bottom: 24px;
}

.security-policies {
  margin-bottom: 24px;
}

.audit-reports {
  margin-bottom: 24px;
}
</style>
